<!-- 提示信息 -->
<app-tip [type]="tipType"></app-tip>

<!-- 按规格选择背景 -->
<app-bg-mask style="z-index: 2000;" *ngIf="standardDialogShow" (mask)="maskShowHide($event)"></app-bg-mask>
<!-- 按规格选择的弹框 -->
<app-standard-dialog *ngIf="standardDialogShow" [foodItem]="foodItem" [show]="standardDialogShow"
                     (showHideChange)="standardShowHide($event)"></app-standard-dialog>
<!-- 头部 -->
<div class="header">
  <div class="left flex" (click)="goBack()" id="btn-back">
    <div class="left-icon">
      <i class="fa fa-angle-left back-icon" aria-hidden="true"></i>
    </div>
    <div class="left-name">
      <span class="back-name">返回</span>
    </div>
  </div>
  <div class="center">搜索</div>
</div>
<!-- 搜索 -->

<div>
  <div class="search">
    <input type="text" placeholder="搜索菜品" id="input_search" autofocus>
  </div>
</div>

<!--&lt;!&ndash; 加菜搜索 &ndash;&gt;-->
<!--<div *ngIf="!searchState">-->
<!--<div class="search" style="color: #333;position: relative;text-align: left;padding-left: 2em;">-->
<!--<i class="fa fa-map-marker" style="font-size: 1.3em"></i> 当前桌号 {{addFood.tableClass}} {{addFood.tableName}}-->
<!--<span (click)="changeSearch()" style="color: #999;position: absolute;right: 1em;background: #fff;height: 2.5em;line-height: 2.5em;padding: 0 1em;top: 1.4em;border-radius: 5px;"><i class="fa fa-search" style="font-size: 1.2em; "></i> 搜索</span>-->
<!--</div>-->
<!--</div>-->


<!-- 菜品分类与菜品列表 -->
<div class="main">
  <!--<div class="class-list">-->
  <!--<div class="class-item"  *ngFor="let v of foodClassList" (click)="classChange(v)" [ngClass]="{'active': v.id === selectClass['id']}">-->
  <!--<span class="class-name">{{v.name}}</span>-->
  <!--<span class="class-count" *ngIf="v.count > 0" [ngClass]="{'class-active': v.id === selectClass['id']}"><i>{{v.count}}</i></span>-->
  <!--</div>-->
  <!--&lt;!&ndash; 没有分类的处理 &ndash;&gt;-->
  <!--</div>-->
  <div class="menu-list">

    <div class="menu-item" *ngFor="let v of foodList">
      <div class="left"><img src="{{v.figure_url}}" alt=""></div>
      <div class="right">
        <div class="title">{{v.name}}</div> <!-- 菜品名称 -->
        <div class="price"><span class="money">{{v.price}}元</span>/份</div> <!-- 价格 -->
        <div class="op" *ngIf="v.type == '0'">
          <span class="reduce" *ngIf="v.count > 0"><img src="assets/images/reduce.png" alt=""
                                                        (click)="reduce(v)"></span>
          <span class="num" *ngIf="v.type == '0' && v.count > 0">{{v.count}}</span> <!-- 数量大于0 显示数字-->
          <span class="add" *ngIf="v.count > 0"><img src="assets/images/add.png" alt="" (click)="add(v)"></span>
          <span class="add" *ngIf="v.count == 0"><img src="assets/images/empty_add.png" alt="" (click)="add(v)"></span>
        </div>

        <div class="op" *ngIf="v.type != '0'" style="text-align: right">
          <span class="reduce">&nbsp;</span>
          <span class=""
                style="position:absolute;right: 0.9em;top: -18px;color: #fff;background: red;text-align: center;padding: 1px 4px;border-radius: 50%"
                *ngIf="v.count > 0"> <i style="transform: scale(0.6);font-style: normal;">{{v.count}}</i></span>
          <!-- 数量大于0 显示数字-->
          <span class="add" style="background: #f39801;color: #fff;padding: 3px 5px;border-radius: 1em"
                (click)="standard(v)">选规格</span>
        </div>
      </div>
    </div>

    <!-- 没有菜品处理操作 -->
    <div class="menu-item" *ngIf="flag" style="text-align: center;box-shadow: none">
      <div style="flex: 1;font-size: 1.2em;color: #999;padding: 1em 0;"><i class="fa fa-info-circle"
                                                                           aria-hidden="true"></i> 没有搜索到菜品
      </div>
    </div>
  </div>
</div>

<!-- 购物车背景 -->
<app-bg-mask *ngIf="shoppingShow" (mask)="maskChange($event)"></app-bg-mask>
<!-- 购物车列表 -->
<app-shop-cart-list [hidden]="!shoppingShow" [shoppingShow]="shoppingShow"
                    (shopList)="shopListChange($event)"></app-shop-cart-list>
<!-- 购物车导航 -->
<app-shop-cart-nav [shoppingShow]="shoppingShow" [addOrderId]="addFood.addOrderId"
                   (shopNav)="shopNavChange($event)"></app-shop-cart-nav>
